<template>
  <div class="goods-container">
    <div class="goods-info" v-for="item in goodsList" :key='item.id' @click="getGoodsInfo(item.id)">
      <img src="https://img11.360buyimg.com/mobilecms/s405x405_jfs/t1/21655/40/104/215872/5c073672E8403985f/fac496d473afc09f.jpg!q70.dpg.webp" alt="">
      <!-- <img :src="item.img_url" alt=""> -->
      <p class="goods-title"> {{ item.title }} </p>
      <div class="goods-content">
        <p class="goods-price">
          <span class="now">￥{{ item.sell_price }}</span>
          <span class="old">￥{{ item.market_price }}</span>
        </p>
        <p class="goods-sell">
          <span>销量：5000</span>
          <span>仅剩：{{ item.stock_quantity }}</span>
        </p>
      </div>
    </div>

    <mt-button type='primary' size='large' @click="getMore()">加载更多</mt-button>
  </div>
</template>

<script>
export default {
  // data 用来存放子组件中的数据
  data: function() {
    return {
      pageIndex: 1,
      goodsList: []
    };
  },
  // created 为声明周期的钩子函数--- 当这个函数执行的时候。data，methods中的数据已经被初始化
  created(){
    // 调用函数
    this.getGoods();
  }
  ,
  methods: {
    getGoods() {
      this.$http.get("api/getgoods?pageindex=" + this.pageIndex).then((result) =>{
        if (result.body.status == 0) {
          console.log(result.body.message);
          this.goodsList = this.goodsList.concat(result.body.message);
        }
      })
    },
    getMore(){
      // 让page页数改变
      this.pageIndex++;
      //重新调用获取商品列表的函数
      this.getGoods();

    },
    getGoodsInfo(id){
      //编程式导航----
      //方式1
      // this.$router.push('/home/goodsInfo'+id);
      //方式2
      // this.$router.push({
      //   path:'/home/goodsInfo'+id
      // });
      //方式3
      this.$router.push({
        name:'detail',
        params:{id}
      })
      
    }
  }
};
</script>


<style scoped>
.goods-container {
  display: flex;
  padding: 0 4px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods-info {
  width: 49%;
  margin: 5px 0;
  /* 改变主轴方向---设置垂直方向的两侧贴边对齐 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #ddd;
}
.goods-info img {
  min-height: 205px;
  display: block;
  width: 100%;
}
.goods-title {
  font-size: 13px;
  line-height: 20px;
  margin: 10px 0px;
  color: #222;
}
.goods-content {
  background-color: #ddd;
  padding: 10px 0;
}
.goods-price .now {
  font-size: 18px;
  color: red;
  font-weight: 500;
}
.goods-price .old {
  font-size: 16px;
  text-decoration: line-through;
  margin-left: 15px;
}
.goods-sell {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 0 10px;
  margin: 0;
}
</style>
